<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <div class="search">
      <div class="item">
        <div class="item1">
          <img src="@/assets/vamml.png" width="100%" height="100%" opacity="0">
        </div>
      <div class="item2">
        <router-link to="/r_search" width="100%" height="100%">
                <el-input
                  :placeholder= "placeholders"
                  prefix-icon="el-icon-search"
                  v-model="input2">
                </el-input>
              </router-link>
      </div>
      <div class="item3">
              <router-link to="/messages">
                <img src="@/assets/信息-01.png" alt="信息" width="100%" height="100%" opacity="0.5">
              </router-link>
      </div>
      </div>
    </div>
    <div class="navbar">
      <router-link to="/discovery" class="router-link">特价商品</router-link>
      <router-link to="/huaweidongtai" class="router-link">华为动态</router-link>
    </div>
    <div class="body">
      <div>
        <div>
      <router-link to="redirectToPage" tag="div">
        <div class="demo">
          <div class="product-card">
            <p><b>智界S7及华为全场景发布会</b></p>
          </div>
          <div style="width: 100%; text-align: center;">
            <img
              src="@/assets/discovery/7.png"
              alt=""
              width="400px"
            />
            <button @click="redirectToPage1" class="transparent-border">进入了解详情</button>
          </div>
        </div>
      </router-link>
      <div>
  </div>
    </div>
    <div>
      <router-link to="" tag="div">
        <div class="demo">
          <div class="product-card">
            <p><b>华为秋季全场新品发布会</b></p>
          </div>
          <div style="width: 100%; text-align: center;">
            <img
              src="@/assets/discovery/8.png"
              alt=""
              width="400px"
            />
            <button @click="redirectToPage2" class="transparent-border">进入了解详情</button>
          </div>
        </div>
      </router-link>
    </div>
    <div>
      <router-link to="" tag="div">
        <div class="demo">
          <div class="product-card">
            <p><b>华为夏季全场新品发布会</b></p>
          </div>
          <div style="width: 100%; text-align: center;">
            <img
              src="@/assets/discovery/9.png"
              alt=""
              width="400px"
            />
            <button @click="redirectToPage3" class="transparent-border">进入了解详情</button>
          </div>
        </div>
      </router-link>
    </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      products: [],
      news: [],
      count: 0,
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版']
    }
  },
  methods: {
    redirectToPage1 () {
      window.location.href = 'https://consumer.huawei.com/cn/press/events/2023/zhijie-s7-and-huawei-all-scenario-launch-event/'
    },
    redirectToPage2 () {
      window.location.href = 'https://consumer.huawei.com/cn/press/events/2023/huawei-all-scenario-new-product-autumn-launch-event/'
    },
    redirectToPage3 () {
      window.location.href = 'https://consumer.huawei.com/cn/press/events/2023/huawei-all-scenario-new-product-summer-launch-event/'
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.item{
  display: flex;
  height: 100%;
  background-color:#fff;
}
.item1{
  width: 30%;
  background: #fff;
}
.item2{
  width: 60%;
  padding-top: 10px;
}
.item3{
  padding: 10px;
  width: 10%;
  margin-top: 5px;
}
.product-card {
  border: 1px solid #ffffff;
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-size: 4px;
}
.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #d6d0d0;
  color: white;
  padding: 10px;
}

.router-link {
  text-decoration: none;
  color: rgb(162, 78, 78);
}
.transparent-border {
  border: 1px solid transparent; /* 设置边框为透明 */
  padding: 10px 20px; /* 设置按钮内边距 */
  background-color: #c4dbeb; /* 设置背景颜色（可根据需要修改） */
  color: #fff; /* 设置文本颜色（可根据需要修改） */
  cursor: pointer; /* 添加指针样式 */
  border-radius: 4px; /* 可选，添加边框圆角 */
}
.transparent-border:hover {
  background-color: #2980b9; /* 鼠标悬停时的背景颜色（可根据需要修改） */
}
.body{
  width: 450px;
  height: 560px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: solid 1px gray;
}
</style>
